<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
        .player {
            width: 500px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
        }

        button {
            margin: 5px;
            padding: 5px 10px;
        }

        #progress-bar {
            width: 100%;
            height: 20px;
            background-color: #f3f3f3;
            border-radius: 10px;
            overflow: hidden;
        }

        #progress {
            height: 100%;
            width: 0;
            background-color: #4caf50;
        }

        #lyrics {
            position: relative;
            overflow: hidden;
            height: 400px; /* 调整为合适的高度 */
        }

        #lyrics p {
            margin: 0;
            line-height: 40px;

            position: absolute;
            width: 100%;
            transition: 1s; /* 动画时间，可以调整 */
        }
        #lyrics .current {
            color: red;
        }

    </style>
</head>
<body>
<div class="player">
    <audio id="audio" src="song.mp3"></audio>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <div id="progress-bar">
        <div id="progress"></div>
    </div>
    <div id="lyrics"></div>
</div>

<script>
    var audio = document.getElementById('audio');
    var playButton = document.getElementById('play');
    var pauseButton = document.getElementById('pause');
    var progressBar = document.getElementById('progress');
    var lyricsDiv = document.getElementById('lyrics');

    // 假设我们有一个数组，其中包含了歌词和它们的时间戳
    var lrcContent = `
			[00:00.00]LRC-musicenc.com
			[00:00.00]孤勇者  - 陈奕迅
			[00:07.00]词：唐恬
			[00:08.00]曲：钱雷
			[00:08.00]编曲：钱雷
			[00:09.00]吉他：高飞
			[00:10.00]人声录音师：利伟明
			[00:11.00]人声录音棚：雅旺录音室
			[00:12.00]Vocal edite：汝文博@SBMS Beijing
			[00:13.00]混音/母带：周天澈@Studio 21A
			[00:14.00]词版权管理方：北京梦织音传媒有限公司
			[00:15.00]曲版权管理方：索尼音乐版权代理（北京）有限公司
			[00:16.00]录音作品及MV版权：EAS MUSIC LTD
			[00:17.00]联合出品：腾讯游戏K6合作部/拳头游戏
			[00:18.00]联合出品监制：霍锦卢泓宇
			[00:19.00]制作人：钱雷
			[00:22.00]都是勇敢的
			[00:28.00]你额头的伤口你的不同你犯的错
			[00:36.00]都不必隐藏
			[00:43.00]你破旧的玩偶你的面具你的自我
			[00:51.00]他们说要带着光驯服每一头怪兽
			[00:58.00]他们说要缝好你的伤没有人爱小丑
			[01:05.00]为何孤独不可光荣
			[01:09.00]人只有不完美值得歌颂
			[01:13.00]谁说污泥满身的不算英雄
			[01:20.00]爱你孤身走暗巷
			[01:22.00]爱你不跪的模样
			[01:24.00]爱你对峙过绝望
			[01:26.00]不肯哭一场
			[01:28.00]爱你破烂的衣裳
			[01:29.00]却敢堵命运的枪
			[01:31.00]爱你和我那么像
			[01:33.00]缺口都一样
			[01:35.00]去吗 配吗 这褴褛的披风
			[01:39.00]战吗 战啊 以最卑微的梦
			[01:43.00]致那黑夜中的呜咽与怒吼
			[01:50.00]谁说站在光里的才算英雄
			[02:08.00]他们说要戒了你的狂
			[02:11.00]就像擦掉了污垢
			[02:16.00]他们说要顺台阶而上而代价是低头
			[02:23.00]那就让我不可乘风
			[02:26.00]你一样骄傲着那种孤勇
			[02:30.00]谁说对弈平凡的不算英雄
			[02:38.00]爱你孤身走暗巷
			[02:40.00]爱你不跪的模样
			[02:41.00]爱你对峙过绝望
			[02:43.00]不肯哭一场
			[02:45.00]爱你破烂的衣裳
			[02:47.00]却敢堵命运的枪
			[02:49.00]爱你和我那么像
			[02:51.00]缺口都一样
			[02:53.00]去吗 配吗 这褴褛的披风
			[02:56.00]战吗 战啊 以最卑微的梦
			[03:00.00]致那黑夜中的呜咽与怒吼
			[03:07.00]谁说站在光里的才算英雄
			[03:12.00]你的斑驳与众不同
			[03:19.00]你的沉默震耳欲聋
			[03:25.00]You Are The Hero
			[03:26.00]爱你孤身走暗巷
			[03:28.00]爱你不跪的模样
			[03:29.00]爱你对峙过绝望
			[03:31.00]不肯哭一场 (You Are The Hero)
			[03:33.00]爱你来自于蛮荒
			[03:35.00]一生不借谁的光
			[03:37.00]你将造你的城邦
			[03:39.00]在废墟之上
			[03:41.00]去吗 去啊 以最卑微的梦
			[03:44.00]战吗 战啊 以最孤高的梦
			[03:48.00]致那黑夜中的呜咽与怒吼
			[03:55.00]谁说站在光里的才算英雄
		`;

    // 解析LRC文件
    var lyrics = lrcContent.split('\n').map(function(line) {
        var match = line.trim().match(/^\[(\d{2}):(\d{2}).(\d{2})\](.*)$/);

        if (match) {
            return {
                time: parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3]) / 100,
                text: match[4],
            };
        }
    }).filter(Boolean);

    // 播放
    playButton.addEventListener('click', function() {
        audio.play();
    });

    // 暂停
    pauseButton.addEventListener('click', function() {
        audio.pause();
    });

    // 创建一个p元素来表示每一行歌词
    var lyricElements = lyrics.map(function(lyric,index) {
        var p = document.createElement('p');
        p.textContent = lyric.text;
        p.textContent = lyric.text;
        p.style.top = index * 40 + 'px'; // 每一行歌词的高度为30px，可以调整
        lyricsDiv.appendChild(p);
        return p;
    });

    // 音频播放更新事件
    audio.addEventListener('timeupdate', function() {
        // 更新进度条
        var progress = audio.currentTime / audio.duration * 100;
        progressBar.style.width = progress + '%';

        for (var i = 0; i < lyrics.length; i++) {
            if (audio.currentTime >= lyrics[i].time && (i == lyrics.length - 1 || audio.currentTime < lyrics[i + 1].time)) {
                // 移除所有歌词的"current"类
                lyricElements.forEach(function(element,index) {
                    element.classList.remove('current');
                    element.style.top = (index - i) * 40 + 'px'; // 更新位置
                });
                // 给当前歌词添加"current"类
                lyricElements[i].classList.add('current');
                break;
            }
        }
    });

    var progressBarContainer = document.getElementById('progress-bar');
    progressBarContainer.addEventListener('click', function(e) {
        // 获取点击位置相对于进度条的X坐标
        var x = e.pageX - progressBarContainer.offsetLeft;

        // 计算点击位置相对于进度条宽度的百分比
        var clickedValue = x * 100 / progressBarContainer.offsetWidth;

        // 将音频的当前播放时间设置为点击位置的百分比
        audio.currentTime = audio.duration * clickedValue / 100;
    });
</script>
</body>
</html>